<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none; /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }

        #pageBox {
            overflow: hidden;
        }

        .count {
            display: flex;
            flex-direction: row;
            background: #fff;
            height: 80px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            overflow: hidden;
        }

        .count > div {
            flex: 1;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .data {
            font-size: 1.5em;
        }
    </style>

</head>
<body>

<div style="padding: 15px;" id="pageBox">
    <div class="count-box">
        <div class="layui-row layui-col-space16">
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-green center">
                        <i class="layui-icon layui-icon-music"></i>
                        歌曲
                    </div>
                    <div class="data" id="musicCount">100</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-blue center">
                        <i class="layui-icon layui-icon-carousel"></i>
                        专辑
                    </div>
                    <div class="data" id="ablumCount">100</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-red center">
                        <i class="layui-icon layui-icon-form"></i>
                        歌单
                    </div>
                    <div class="data" id="musiclistCount">100</div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="count">
                    <div class="title layui-bg-cyan center">
                        <i class="layui-icon layui-icon-group"></i>
                        用户
                    </div>
                    <div class="data" id="userCount">100</div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-music"></i>
                        热搜歌曲TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotMusic" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-chart-screen"></i>
                        热搜专辑TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotAblum" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-list"></i>
                        热搜歌单TOP10
                    </div>
                    <div class="layui-card-body">
                        <div id="hotMusiclist" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <i class="layui-icon layui-icon-chart"></i>
                        新增用户趋势
                    </div>
                    <div class="layui-card-body">
                        <div id="hotSinger" style="width: 100%;height: 280px"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script src="../res/echarts/echarts.js"></script>
<script>
    //JS
    layui.config({
        base: '/echarts/'
    }).use(function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , $ = layui.$
            , echarts = layui.echarts;

        // 初始化所有图表
        var hotMusicChart = echarts.init(document.getElementById('hotMusic'));
        var hotAblumChart = echarts.init(document.getElementById('hotAblum'));
        var hotMusiclistChart = echarts.init(document.getElementById('hotMusiclist'));
        var userTrendChart = echarts.init(document.getElementById('hotSinger'));

        // 页面加载时获取统计数据
        function loadStats() {
            $.ajax({
                url: '/dashboard/stats',
                type: 'GET',
                success: function(res) {
                    // 更新统计数据
                    $('#musicCount').text(res.musicCount || 0);
                    $('#ablumCount').text(res.albumCount || 0);
                    $('#musiclistCount').text(res.musicListCount || 0);
                    $('#userCount').text(res.userCount || 0);
                },
                error: function() {
                    console.error('获取统计数据失败');
                }
            });
        }

        // 加载热搜歌曲TOP10
        function loadHotMusic() {
            $.ajax({
                url: '/dashboard/hotMusic',
                type: 'GET',
                success: function(res) {
                    var names = res.map(item => item.name);
                    var values = res.map(item => item.playCount);

                    hotMusicChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: names.reverse()
                        },
                        series: [{
                            name: '播放量',
                            type: 'bar',
                            data: values.reverse(),
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ])
                            }
                        }]
                    });
                },
                error: function() {
                    console.error('获取热搜歌曲数据失败');
                }
            });
        }

        // 加载热搜专辑TOP10
        function loadHotAlbum() {
            $.ajax({
                url: '/dashboard/hotAlbum',
                type: 'GET',
                success: function(res) {
                    var names = res.map(item => item.name);
                    var values = res.map(item => item.listenCount);

                    hotAblumChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: names.reverse(),
                            axisLabel: {
                                formatter: function(value) {
                                    return value.length > 8 ? value.substring(0, 8) + '...' : value;
                                }
                            }
                        },
                        series: [{
                            name: '收听量',
                            type: 'bar',
                            data: values.reverse(),
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {offset: 0, color: '#fbc2eb'},
                                    {offset: 0.5, color: '#a18cd1'},
                                    {offset: 1, color: '#a18cd1'}
                                ])
                            }
                        }]
                    });
                },
                error: function() {
                    console.error('获取热搜专辑数据失败');
                }
            });
        }

        // 加载热搜歌单TOP10
        function loadHotMusicList() {
            $.ajax({
                url: '/dashboard/hotMusicList',
                type: 'GET',
                success: function(res) {
                    var names = res.map(item => item.name);
                    var values = res.map(item => item.collectCount);

                    hotMusiclistChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: names.reverse(),
                            axisLabel: {
                                formatter: function(value) {
                                    return value.length > 8 ? value.substring(0, 8) + '...' : value;
                                }
                            }
                        },
                        series: [{
                            name: '收藏量',
                            type: 'bar',
                            data: values.reverse(),
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                    {offset: 0, color: '#f6d365'},
                                    {offset: 0.5, color: '#fda085'},
                                    {offset: 1, color: '#fda085'}
                                ])
                            }
                        }]
                    });
                },
                error: function() {
                    console.error('获取热搜歌单数据失败');
                }
            });
        }

        // 加载新增用户趋势
        function loadUserTrend() {
            $.ajax({
                url: '/dashboard/userTrend',
                type: 'GET',
                success: function(res) {
                    userTrendChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['新增用户']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: res.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '新增用户',
                            type: 'line',
                            stack: '总量',
                            data: res.counts,
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {offset: 0, color: 'rgba(24, 144, 255, 0.6)'},
                                    {offset: 1, color: 'rgba(24, 144, 255, 0.1)'}
                                ])
                            },
                            itemStyle: {
                                color: '#1890ff'
                            },
                            lineStyle: {
                                color: '#1890ff'
                            }
                        }]
                    });
                },
                error: function() {
                    console.error('获取用户趋势数据失败');
                }
            });
        }

        // 窗口大小改变时重新调整图表大小
        window.addEventListener('resize', function() {
            hotMusicChart.resize();
            hotAblumChart.resize();
            hotMusiclistChart.resize();
            userTrendChart.resize();
        });

        // 加载所有数据
        loadStats();
        loadHotMusic();
        loadHotAlbum();
        loadHotMusicList();
        loadUserTrend();
    });
</script>
</body>
</html>